<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #wrap {
            width: 500px;
            height: 500px;
            border: 1px dotted black;
            margin: 0 auto;
            position: relative;
        }

        #item1 {
            width: 100px;
            height: 100px;
            background-color: purple;
            /* 核心代码 */
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;

        }
    </style>
</head>
<body>
<!--绝对定位元素的布局由元素的三个因素决定：位置（top、bottom、left、right）、元素尺寸 和 margin。-->
<!--绝对定位元素在布局上呈现自适应的特点——位置和尺寸固定，则自适应margin值；位置和margin固定，则自适应尺寸。-->
<div id='wrap'>
  <div id='item1'></div>
</div>
</body>
</html>